import React, { useState } from 'react'
import { CalendarPicker, List } from 'antd-mobile'
import { ResultPage, Card, Button,Switch } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import style from '../index/index.module.css'
import dayjs from 'dayjs'

import {  Space, Swiper, Toast } from 'antd-mobile'
function Index() {

   const [visible2, setVisible2] = useState(false)

   const min = new Date()
min.setDate(5)
min.setMonth(min.getMonth() - 1)

const max = new Date()
max.setDate(6)
max.setMonth(max.getMonth() + 1)
const now = new Date()

  const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']

  const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      className={style.content}
      style={{ background: color }}
      
    >
      {index + 1}
    </div>
  </Swiper.Item>
))
  return (
    <div>
      <ResultPage
      status='success'
      title='火车票预定'
      description='便捷购票，服务您的每一次出行'
    >

      <Card style={{ height: 250, marginTop: 12 }}>
        <div className={style.box}>
          <span>北京</span>
          <span><LoopOutline /></span>
          <span>上海</span>
          <span onClick={()=>setVisible2(true)}>2024-12-10</span>
          <span></span>
          <span></span>
          <span>只看高铁/动车</span>
          <span></span>
          <span> <Switch /></span>
        </div>

         <Button style={{marginTop:20}} block color='warning' size='large'>
          搜索
        </Button>
      </Card>

         <Swiper
          loop
          autoplay
         
        >
          {items}
        </Swiper>

         <List.Item
    
      >
        <CalendarPicker
         min={min}
          max={max}
          defaultValue={now}
          selectionMode='single'
          visible={visible2}
          onClose={() => setVisible2(false)}
          onMaskClick={() => setVisible2(false)}
          renderBottom={date => {
            const dates = [27, 28, 29]
            const d = dayjs(date).date()

            if (dates.includes(d)) {
              return ['今天','明天','后天']
            }
          }}
        />
      </List.Item>
    </ResultPage>
    </div>
  )
}

export default Index

